<script setup lang="ts">
import { useUser } from '~/stroes/user'

const props = defineProps<{
    // 从父组件传递过来的必选参数，决定是否显示对话框
    visible: boolean
    // 从父组件传递过来的可选type参数，决定对话框的类型
    type?: 'login' | 'signup'
}>()
// 向父组件发送完成事件
const emit = defineEmits(['success'])
const user = useUser()

const width = ref('30%')
// 重置对话框宽度
const resize = () => {
    if (window.innerWidth < 768) {
        width.value = '90%'
    } else if (window.innerWidth < 1000) {
        width.value = '60%'
    } else {
        width.value = '30%'
    }
}
onMounted(() => {
    resize()
    // 监听窗体大小变化
    window.addEventListener('resize', resize)
})
function open () {
    if (user.isLogged) {
        ElMessage.warning(`您已登录，无需重复${props.type === 'signup' ? '注册' : '登录'}`)
        close()
    }
}
// 关闭时务必通知父组件
function close () {
    emit('success')
}
</script>

<template>
    <ClientOnly>
        <!-- Element Plus的弹窗涉及DOM结构的插入和删除，只能客户端渲染 -->
        <!-- 不知道为什么，@element-plus/nuxt插件没处理弹窗组件 -->
        <el-dialog
            :close-on-click-modal="false"
            :model-value="visible"
            :title="type === 'signup' ? '注册' : '登录'"
            :width="width"
            align-center
            center
            destroy-on-close
            draggable
            @close="close"
            @open="open"
        >
            <BaseUserForm :type="type" @success="close" />
        </el-dialog>
    </ClientOnly>
</template>
